<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
        #main{
            width: 90vw;
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="main"></div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));

    let colorArr=["#218de0", "#01cbb3", "#85e647", "#5d5cda", "#05c5b0", "#c29927"];
    let colorAlpha=['rgba(60,170,211,0.05)','rgba(1,203,179,0.05)','rgba(133,230,71,0.05)','rgba(93,92,218,0.05)','rgba(5,197,176,0.05)','rgba(194,153,39,0.05)']
    let option = {
        backgroundColor:"#090e36",
        grid: {
            left: -100,
            top: 50,
            bottom: 10,
            right: 10,
            containLabel: true
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        legend: {
            show:false
        },

        polar: {},
        angleAxis: {
            interval: 1,
            type: 'category',
            value: [],
            z: 10,
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#0B4A6B",
                    width: 1,
                    type: "solid"
                },
            },
            axisLabel: {
                interval: 0,
                show: true,
                color: "#0B4A6B",
                margin: 8,
                fontSize: 16
            },
        },
        radiusAxis: {
            min: 20,
            max: 120,
            interval: 20,
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#0B3E5E",
                    width: 1,
                    type: "solid"
                },
            },
            axisLabel: {
                formatter: '{value} %',
                show: false,
                padding: [0, 0, 20, 0],
                color: "#0B3E5E",
                fontSize: 16
            },
            splitLine: {
                lineStyle: {
                    color: "#07385e",
                    width: 2,
                    type: "dashed"
                }
            }
        },
        calculable: true,
        series: [ {
            stack: 'a',
            type: 'pie',
            radius: '80%',
            roseType: 'radius',
            zlevel:10,
            startAngle: 100,
            label: {
                normal: {
                    formatter: [ '{b|{b}}','{d|{d}%}'].join('\n'),
                    rich: {
                        b: {
                            color: '#3bd2fe',
                            fontSize: 14,
                            lineHeight: 20
                        },
                        d: {
                            color: '#d0fffc',
                            fontSize: 14,
                            height: 20
                        },
                    },
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length: 10,
                    length2: 45,
                    lineStyle: {
                        color: '#0096b1'

                    }
                },
                emphasis: {
                    show: false
                }
            },
            value: [{
                value: 30,
                name: '容量小设备老旧',
                itemStyle: {
                    borderColor: colorArr[0],
                    borderWidth:2,
                    shadowBlur: 20,
                    shadowColor: "#41a8f8",
                    shadowOffsetx: 25,
                    shadowOffsety: 20,
                    color:colorAlpha[0]
                }
            },
                {
                    value: 27,
                    name: '季节性企业用电',
                    itemStyle: {
                        borderColor: colorArr[1],
                        borderWidth:2,
                        shadowBlur: 20,
                        shadowColor: colorArr[1],
                        shadowOffsetx: 25,
                        shadowOffsety: 20,
                        color:colorAlpha[1]
                    }
                },
                {
                    value: 15,
                    name: '企业用电高峰',
                    itemStyle: {
                        borderColor: colorArr[2],
                        borderWidth:2,
                        shadowBlur: 20,
                        shadowColor: colorArr[2],
                        shadowOffsetx: 25,
                        shadowOffsety: 20,
                        color:colorAlpha[2]
                    }
                },
                {
                    value: 13,
                    name: '节假日',
                    itemStyle: {
                        borderColor: colorArr[3],
                        borderWidth:2,
                        shadowBlur: 20,
                        shadowColor: colorArr[3],
                        shadowOffsetx: 25,
                        shadowOffsety: 20,
                        color:colorAlpha[3]
                    }
                },
                {
                    value: 10,
                    name: '临时用电',
                    itemStyle: {
                        borderColor: colorArr[4],
                        borderWidth:2,
                        shadowBlur: 20,
                        shadowColor: colorArr[4],
                        shadowOffsetx: 25,
                        shadowOffsety: 20,
                        color:colorAlpha[4]
                    }
                },
                {
                    value: 20,
                    name: '三相用电不平衡',
                    itemStyle: {
                        borderColor: colorArr[5],
                        borderWidth:2,
                        shadowBlur: 20,
                        shadowColor: colorArr[5],
                        shadowOffsetx: 25,
                        shadowOffsety: 20,
                        color:colorAlpha[5]
                    }
                }
            ]
        }, ]
    };
    myChart.setOption(option);
</script>
